<template>
  <div>
    <div id="map"></div>
  </div>
</template>
<script>
export default {
  name: 'smallMap',
  data() {
    return {
      bbb: '',
      updata: '',
      bounds: [
        [109.53035453829456, 18.310654383343522], // Southwest
        [109.53035475725476, 18.30946786268281],
      ], // Northeast
    }
  },
  props: ['transPosition'],
  mounted() {
    this.initmap()
  },
  methods: {
    initmap() {
      var loc = [109.5303482928844, 18.31000702577523]
      var map = new mapboxgl.Map({
        container: 'map',
        style: {
          version: 8,
          sources: {
            'raster-tiles': {
              // "attribution": attribution,
              type: 'raster',
              tiles: [
                window._CONFIG['serveUrl'] +
                  // ':8090/iserver/services/map-ShuangChuang-2/rest/maps/双创导航@导航/zxyTileImage.png?z={z}&x={x}&y={y}',
                  ':8090/iserver/services/map-baidu/rest/maps/normal/zxyTileImage.png?z={z}&x={x}&y={y}',
              ],
              tileSize: 256,
            },
          },
          layers: [
            {
              id: 'simple-tiles',
              type: 'raster',
              source: 'raster-tiles',
              minzoom: 0,
              maxzoom: 22,
            },
          ],
        },
        center: loc,
        zoom: 16,
        pitch: 0,
        bearing: 50,
        // maxBounds: this.bounds
      })
      this.local = function () {
        map.flyTo({
          center: [this.transPosition[0], this.transPosition[1]],
        })
      }
      var nav = new mapboxgl.NavigationControl({
        //是否显示指南针，默认为true
        showCompass: true,
        //是否显示缩放按钮，默认为true
        showZoom: false,
      })
      //添加导航控件，控件的位置包括'top-left', 'top-right','bottom-left' ,'bottom-right'四种，默认为'top-right'
      map.addControl(nav, 'top-right')
      var _this = this
      map.on('load', function () {
        map.addSource('geojson', _this.createDot([109.53005635795263, 18.3025155482445]))
        map.loadImage('/static/img/light.png', function (error, image) {
          if (error) throw error
          map.addImage('point', image)
          map.addLayer({
            id: 'points',
            type: 'symbol',
            source: 'geojson',
            layout: {
              'icon-image': 'point',
              'icon-size': 0.06,
            },
          })
        })
      })
      // 更新位置的方法
      this.updata = function () {
        let data = this.createDot([this.transPosition[0], this.transPosition[1]]).data
        if (map.getSource('geojson')) {
          map.getSource('geojson').setData(data)
        }
        map.rotateTo(((this.transPosition[2] * 180) / 3.1415926 - 90) % 360, { duration: 0 })
      }
    },
    // 返回json格式
    createDot(center) {
      var coords = {
        latitude: center[1],
        longitude: center[0],
      }
      var ret = []
      ret.push([coords.longitude, coords.latitude])
      ret.push(ret[0])
      return {
        type: 'geojson',
        data: {
          type: 'FeatureCollection',
          features: [
            {
              type: 'Feature',
              geometry: {
                type: 'Point',
                coordinates: ret[0],
              },
            },
          ],
        },
      }
    },
  },
  watch: {
    transPosition(n, o) {
      if (o != '') {
        this.updata()
        this.local()
      }
    },
  },
}
</script>

<style>
#map {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}
</style>